<template>
    <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <el-row>
        <el-col :span="7">
          <el-input placeholder="请输入用户账号" clearable @clear="getUserList()">
            <template #append>
              <el-button icon="el-icon-search" @click="getUserList()"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="17"></el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-tabs type="border-card" style="margin-top:10px">
        <el-tab-pane>
          <template #label>全部</template>
          <el-table :data="userList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="用户账号" prop="phone"></el-table-column>
            <el-table-column label="岗位" prop="roleName"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status===0">未审核</span>
                <span v-if="scope.row.status===2">已通过</span>
                <span v-if="scope.row.status===1">已拒绝</span>
                <span v-if="scope.row.status===3">已注销</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="260px">
              <template v-slot="scope">
                <!-- 如果该成员申请注册本公司，且还未通过，才显示此按钮 -->
                <el-button size="mini" type="primary" icon="el-icon-success" :disabled="scope.row.status!=0" @click="acceptUser(scope.row)">通过</el-button>
                <el-button size="mini" type="warning" icon="el-icon-error" :disabled="scope.row.status!=0" @click="rejectUser(scope.row)">拒绝</el-button>            
                <!-- 如果成员属于本公司，才显示删除按钮 -->
                <el-button size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.status!=2" @click="cancelUser(scope.row)">注销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>未审核</template>
          <el-table :data="uncheckUserList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="用户账号" prop="phone"></el-table-column>
            <el-table-column label="岗位" prop="roleId"></el-table-column>
            <el-table-column label="操作" min-width="260px">
              <template v-slot="scope">
                <el-button size="mini" type="primary" icon="el-icon-success" :disabled="scope.row.status!=0">通过</el-button>
                <el-button size="mini" type="warning" icon="el-icon-error" :disabled="scope.row.status!=0">拒绝</el-button>            
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- <el-tab-pane>
          <template #label>已审核</template>
          <el-table :data="checkedUserList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="用户账号" prop="phone"></el-table-column>
            <el-table-column label="岗位" prop="role"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status===1">已通过</span>
                <span v-if="scope.row.status===2">已拒绝</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="260px">
              <template v-slot="scope">
                <el-button size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.status!=1">注销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
    </div>
</template>

<script>
export default {
  data(){
    return{
      userList:[],
      uncheckUserList:[],
      checkedUserList:[],
    }
  },
  mounted() {
    this.getUncheckUserList();
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("user/getUserList");
      console.log(res);
      if (res.code !== 200)
        return this.$message.error(res.msg);
      this.userList = res.data;
    },
    async getUncheckUserList() {
      const { data: res } = await this.$http.get("user/getUncheckUserList");
      if (res.code !== 200)
        return this.$message.error(res.msg);
      this.uncheckUserList = res.data;
    },
    async acceptUser(user){
      let formData = new FormData();
      formData.append('id',user.id);
      const { data: res } = await this.$http.post('user/acceptUser',formData)
      console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg);
      this.getUserList();
      this.getUncheckUserList();
    },
    async rejectUser(user){
      let formData = new FormData();
      formData.append('id',user.id);
      const { data: res } = await this.$http.post('user/rejectUser',formData)
      console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg);
      this.getUserList();
      this.getUncheckUserList();
    },
    async cancelUser(user){
      let formData = new FormData();
      formData.append('id',user.id);
      const { data: res } = await this.$http.post('user/cancelUser',formData)
      console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg);
      this.getUserList();
      this.getUncheckUserList();
    },
  }
  
}
</script>

<style lang="less" scoped>

</style>
